<template>
  <div class="d-view default-page" v-loading="loading">
    <div class="close-btn" @click="back"><i class="iconfont icon-return"></i>返回</div>
    <el-carousel ref="carousel" :interval="time" arrow="always" v-if="type==='0'">
      <el-carousel-item v-for="(item,index) in dataList" :key="index">
        <div class="img-box">
          <img :src="item.url">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="video" v-else>
      <div class="video-content" id="video-box"></div>
      <div class="next-btn" @click="playNext">
        <i class="iconfont icon-arrow-right"></i>
      </div>
      <div class="before-btn" @click="playBefore">
        <i class="iconfont icon-arrow-left "></i>
      </div>
    </div>
  </div>
</template>

<script>
import {baseRequest, SCREEN_CODE} from "@/utils/http/request";
import {autoLogin, loginInfo} from "@/utils/brower";

export default {
  name: "index",
  data() {
    return {
      aliPlayer: null,
      loading: false,
      testVideo: '',
      type: '0',
      videoIndex: 0,
      dataList: [],
      time: 5000
    }
  },
  mounted() {
    const token = sessionStorage.getItem('token')
    const pwdStr = localStorage.getItem('auto')
    const account = localStorage.getItem('username')

    if (!token) {
      // 没有token 走判断
      autoLogin((res) => {
        if (res && pwdStr) {
          this.login(account, window.atob(pwdStr))
        }
      })
    } else {
      this.getData()
    }

    this.$nextTick(() => {
      if (this.$refs.carousel) {
        this.$refs.carousel.handleMouseEnter = () => {
        };
      }
    })
  },
  methods: {
    playVideo() {
      if (this.videoIndex < 0) {
        this.videoIndex = this.dataList.length - 1
      }
      if (this.videoIndex > this.dataList.length - 1) {
        this.videoIndex = 0
      }
      this.aliPlayer.loadByUrl(this.dataList[this.videoIndex].url)
    },
    playNext() {
      this.videoIndex++
      this.playVideo()
    },
    playBefore() {
      this.videoIndex--
      this.playVideo()
    },
    delHandleMouseEnter() {
      this.$refs.carousel.handleMouseEnter = () => {
      };
    },
    back() {
      this.$router.push('/choosePath')
    },
    // 初始化视频
    initVideo() {
      let source
      if (this.dataList.length > 0) {
        source = this.dataList[0].url
        this.videoIndex = 0
      }
      this.aliPlayer = new window.Aliplayer({
        id: 'video-box',
        height: '100%',
        autoplay: true,
        source: source
      });
      setTimeout(() => {
        this.aliPlayer.on("ended", () => {
          this.videoIndex++
          this.playVideo()
        });
      }, 1000)
    },
    async login(username, pwd) {
      this.loading = true
      await baseRequest.login({
        username: username,
        pwd: pwd,
        screenCode: SCREEN_CODE.construction
      }).then(res => {
        const {code, token, screenName} = res
        if (code === '01') {
          loginInfo(this.account, this.password)
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('screenName', screenName)
          sessionStorage.setItem('username', this.account)
        }

      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })

      this.getData()
    },
    getData() {
      this.loading = true
      baseRequest.screensaverGet().then(res => {
        const {image_datalist, video_datalist, time} = res
        if (res.code === '01') {
          this.time = parseInt(time || '5') * 1000
          if (video_datalist && video_datalist.length > 0) {
            this.dataList = video_datalist
            this.type = '1'
            setTimeout(() => {
              this.initVideo()
            }, 100)
          } else {
            this.dataList = image_datalist
            this.type = '0'
          }
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/style/base";

.default-page {
  .next-btn, .before-btn {
    width: 4rem;
    height: 4rem;
    background: $color-alpha-black-48;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    i {
      font-size: 2rem;
    }
  }

  .next-btn {
    right: 2rem;
  }

  .before-btn {
    left: 2rem;
  }


  .close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
    border-radius: 8px;
    background: $color-alpha-black-32;
    padding: .5rem 1rem;
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;

    i {
      margin-right: 5px;
    }
  }

  .el-carousel, .el-carousel__container, .video, video, #video-box {
    height: 100vh !important;
    width: 100vw !important;
    position: relative;
    overflow: hidden;
  }

  .video-content {
    width: 100%;
    height: 100%;
    background: black;
  }

  .img-box {
    height: 100vh;
    width: 100vw;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}
</style>
